<template>
  <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from "echarts";
// require("echarts/theme/macarons"); // echarts theme
import resize from "../Chart/mixins/resize";

export default {
  mixins: [resize],
  props: {
    id: {
      type: String,
      default: "chart",
    },
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "266px",
    },
    chartData: {
      type: Object,
      default() {
        return {
          xData: [],
          female: [],
          // male: [],
          // average: [],
        };
      },
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  watch: {
    chartData: {
      handler: function (newnew, oldold) {
        // if (JSON.stringify(newnew) == "{}") {
        //   return;
        // } else {
        this.initChart();
        // }
      },
      deep: true,
      immediate: true,
    },
  },
  // mounted() {
  //   this.$nextTick(() => {
  //     this.initChart();
  //   });
  // },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id));

      this.chart.setOption({
        tooltip: {
          trigger: "item",

          confine: true, // 设置tooltip不超出视图范围
        },
        // legend: {
        //   left: "center",
        //   bottom: "10",
        //   // data: this.chartData.xData,
        //   // ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
        // },
        series: [
          // 圆环
          {
            name: "",
            type: "pie",
            // roseType: "radius",
            radius: [15, 95],
            center: ["50%", "50%"], // 饼状图的位置,
            data: this.chartData.female,
            //   [
            //   { value: 320, name: 'Industries' },
            //   { value: 240, name: 'Technology' },
            //   { value: 149, name: 'Forex' },
            //   { value: 100, name: 'Gold' },
            //   { value: 59, name: 'Forecasts' }
            // ],
            animationEasing: "cubicInOut",
            animationDuration: 2600,
            //百分比
            label: {
              normal: {
                show: false,
                formatter: "{b}: {c} ({d}%)", //自定义显示格式(b:name, c:value, d:百分比)
                position: "right",
              },
            },
            color: ["#ff7070", "#73c0de"],
            itemStyle: {
              normal: {
                label: {
                  padding: [0, 0],
                  alignTo: "labelLine",
                },
              },
            },
          },

          // 配置里面的圆
          {
            type: "gauge",
            center: ["50%", "50%"], // 饼状图的位置
            radius: "35%",
            // 如何是版本是4 这里是359.999；不能是360；否则圆环不能正常显示
            // 如果是版本是5，这里可以是360
            startAngle: 359.999,
            endAngle: 0,
            splitNumber: 4,
            zlevel: 10,
            axisLine: {
              // 坐标轴线
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: [[1, "#fff"]],
                width: "100%",
                shadowColor: "#CDCDCD", //背景阴影颜色
                shadowOffsetX: 0, // X偏移量
                shadowOffsetY: 0, // Y偏移量
                shadowBlur: 10, // 模糊范围
              },
            },
            splitLine: {
              //分隔线样式
              show: false,
            },
            axisLabel: {
              //刻度标签
              show: false,
            },
            axisTick: {
              //刻度样式
              show: false,
            },
            detail: {
              show: false,
            },
            //仪表盘指针。
            pointer: {
              // 不显示仪表盘中的指针
              show: false,
            },
            title: {
              // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。
              // 可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
              offsetCenter: ["0%", "0%"],
              color: "#999999",
            },
            data: [
              {
                name: this.chartData.xData
                  ? this.chartData.xData + "%"
                  : "未更新",
              },
            ],
          },
        ],
      });
      this.chart.on("click", this.handleClick);
    },
    handleClick(params) {
      console.log(params.dataIndex);
      // this.$emit("SetPieChartData", params.dataIndex);
    },
  },
};
</script>
